home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2018 January / PCgo 01-2018 CD-ROM Germany.iso / nw.pak / Unnamed File 000126.txt < prev    next >
Encoding:
Text File  |  2015-07-29  |  3.6 KB  |  120 lines
  1. // Copyright (c) 2011 The Chromium Authors. All rights reserved.
  2. // Use of this source code is governed by a BSD-style license that can be
  3. // found in the LICENSE file.
  4.  
  5. /**
  6.  * @fileoverview DragWrapper
  7.  * A class for simplifying HTML5 drag and drop. Classes should use this to
  8.  * handle the nitty gritty of nested drag enters and leaves.
  9.  */
  10. cr.define('cr.ui', function() {
  11.   /**
  12.    * Creates a DragWrapper which listens for drag target events on |target| and
  13.    * delegates event handling to |handler|. The |handler| must implement:
  14.    *   shouldAcceptDrag
  15.    *   doDragEnter
  16.    *   doDragLeave
  17.    *   doDragOver
  18.    *   doDrop
  19.    * @constructor
  20.    */
  21.   function DragWrapper(target, handler) {
  22.     this.initialize(target, handler);
  23.   }
  24.  
  25.   DragWrapper.prototype = {
  26.     initialize: function(target, handler) {
  27.       target.addEventListener('dragenter',
  28.                               this.onDragEnter_.bind(this));
  29.       target.addEventListener('dragover', this.onDragOver_.bind(this));
  30.       target.addEventListener('drop', this.onDrop_.bind(this));
  31.       target.addEventListener('dragleave', this.onDragLeave_.bind(this));
  32.  
  33.       this.target_ = target;
  34.       this.handler_ = handler;
  35.     },
  36.  
  37.     /**
  38.      * The number of un-paired dragenter events that have fired on |this|. This
  39.      * is incremented by |onDragEnter_| and decremented by |onDragLeave_|. This
  40.      * is necessary because dragging over child widgets will fire additional
  41.      * enter and leave events on |this|. A non-zero value does not necessarily
  42.      * indicate that |isCurrentDragTarget()| is true.
  43.      * @type {number}
  44.      * @private
  45.      */
  46.     dragEnters_: 0,
  47.  
  48.     /**
  49.      * Whether the tile page is currently being dragged over with data it can
  50.      * accept.
  51.      * @type {boolean}
  52.      */
  53.     get isCurrentDragTarget() {
  54.       return this.target_.classList.contains('drag-target');
  55.     },
  56.  
  57.     /**
  58.      * Handler for dragenter events fired on |target_|.
  59.      * @param {Event} e A MouseEvent for the drag.
  60.      * @private
  61.      */
  62.     onDragEnter_: function(e) {
  63.       if (++this.dragEnters_ == 1) {
  64.         if (this.handler_.shouldAcceptDrag(e)) {
  65.           this.target_.classList.add('drag-target');
  66.           this.handler_.doDragEnter(e);
  67.         }
  68.       } else {
  69.         // Sometimes we'll get an enter event over a child element without an
  70.         // over event following it. In this case we have to still call the
  71.         // drag over handler so that we make the necessary updates (one visible
  72.         // symptom of not doing this is that the cursor's drag state will
  73.         // flicker during drags).
  74.         this.onDragOver_(e);
  75.       }
  76.     },
  77.  
  78.     /**
  79.      * Thunk for dragover events fired on |target_|.
  80.      * @param {Event} e A MouseEvent for the drag.
  81.      * @private
  82.      */
  83.     onDragOver_: function(e) {
  84.       if (!this.target_.classList.contains('drag-target'))
  85.         return;
  86.       this.handler_.doDragOver(e);
  87.     },
  88.  
  89.     /**
  90.      * Thunk for drop events fired on |target_|.
  91.      * @param {Event} e A MouseEvent for the drag.
  92.      * @private
  93.      */
  94.     onDrop_: function(e) {
  95.       this.dragEnters_ = 0;
  96.       if (!this.target_.classList.contains('drag-target'))
  97.         return;
  98.       this.target_.classList.remove('drag-target');
  99.       this.handler_.doDrop(e);
  100.     },
  101.  
  102.     /**
  103.      * Thunk for dragleave events fired on |target_|.
  104.      * @param {Event} e A MouseEvent for the drag.
  105.      * @private
  106.      */
  107.     onDragLeave_: function(e) {
  108.       if (--this.dragEnters_ > 0)
  109.         return;
  110.  
  111.       this.target_.classList.remove('drag-target');
  112.       this.handler_.doDragLeave(e);
  113.     },
  114.   };
  115.  
  116.   return {
  117.     DragWrapper: DragWrapper
  118.   };
  119. });
  120.